$(function() {
	//前言部分动画
	//初始化蒙版层
	//图一
	$(".part1-back .img1-mask").css({
		"top": "165px",
		"height": "30px"
	});
	//一直显示文字
	$(".part1-back .img1-mask .temp0").css({
		"top": "5px"
	});
	//鼠标放上才会显示文字
	$(".part1-back .img1-mask .temp1").css({
		"top": "5px",
		"opacity": "0"
	});

	//图二
	$(".part1-back .img2-mask").css({
		"top": "165px",
		"height": "30px"
	});
	//一直显示文字
	$(".part1-back .img2-mask .temp2").css({
		"top": "5px"
	});
	//鼠标放上才会显示文字
	$(".part1-back .img2-mask .temp3").css({
		"top": "5px",
		"opacity": "0"
	});

	//图三
	$(".part1-back .img3-mask").css({
		"top": "365px",
		"height": "30px"
	});
	//一直显示文字
	$(".part1-back .img3-mask .temp4").css({
		"top": "5px"
	});
	//鼠标放上才会显示文字
	$(".part1-back .img3-mask .temp5").css({
		"top": "5px",
		"opacity": "0"
	});

	//图四
	$(".part1-back .img4-mask").css({
		"top": "365px",
		"height": "30px"
	});
	//一直显示文字
	$(".part1-back .img4-mask .temp6").css({
		"top": "5px"
	});
	//鼠标放上才会显示文字
	$(".part1-back .img4-mask .temp7").css({
		"top": "5px",
		"opacity": "0"
	});

	//设置鼠标滑进划出动画
	//图一
	$(".part1-back .preface-img1").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img1-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp0") || obj.hasClass("temp1")) {
			obj = obj.parent().parent();
		}

		//制作动画 鼠标滑过 蒙版向上拉开
		obj.find(".img1-mask").stop().animate({
			"top": "5px",
			"height": "190px"
		}, 300);
		//一直显示的文字垂直居中
		obj.find(".temp0").stop().animate({
			"top": "53px",
			"z-index": "100"
		}, 300);
		//另一种文字 出现并显示
		obj.find(".temp1").stop().animate({
			"top": "97px",
			"opacity": "1",
			"z-index": "101"
		}, 200);

	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img1-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp0") || obj.hasClass("temp1")) {
			obj = obj.parent().parent();
		}

		//恢复
		obj.find(".img1-mask").stop().animate({
			"top": "165px",
			"height": "30px"
		}, 200);
		obj.find(".temp0").stop().animate({
			"top": "5px"
		}, 200)
		obj.find(".temp1").stop().animate({
			"top": "5px",
			"opacity": "0"
		}, 300)
	});

	//图二
	$(".part1-back .preface-img2").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img2-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp2") || obj.hasClass("temp3")) {
			obj = obj.parent().parent();
		}

		//制作动画 鼠标滑过 蒙版向上拉开
		obj.find(".img2-mask").stop().animate({
			"top": "5px",
			"height": "190px"
		}, 300);
		//一直显示的文字垂直居中
		obj.find(".temp2").stop().animate({
			"top": "53px",
			"z-index": "100"
		}, 300);
		//另一种文字 出现并显示
		obj.find(".temp3").stop().animate({
			"top": "97px",
			"opacity": "1",
			"z-index": "101"
		}, 200);

	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img2-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp2") || obj.hasClass("temp3")) {
			obj = obj.parent().parent();
		}

		//恢复
		obj.find(".img2-mask").stop().animate({
			"top": "165px",
			"height": "30px"
		}, 200);
		obj.find(".temp2").stop().animate({
			"top": "5px"
		}, 200)
		obj.find(".temp3").stop().animate({
			"top": "5px",
			"opacity": "0"
		}, 300)
	});

	//图三
	$(".part1-back .preface-img3").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img3-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp4") || obj.hasClass("temp5")) {
			obj = obj.parent().parent();
		}

		//制作动画 鼠标滑过 蒙版向上拉开
		obj.find(".img3-mask").stop().animate({
			"top": "205px",
			"height": "190px"
		}, 300);
		//一直显示的文字垂直居中
		obj.find(".temp4").stop().animate({
			"top": "58px",
			"z-index": "100"
		}, 300);
		//另一种文字 出现并显示
		obj.find(".temp5").stop().animate({
			"top": "97px",
			"opacity": "1",
			"z-index": "101"
		}, 200);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img3-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp4") || obj.hasClass("temp5")) {
			obj = obj.parent().parent();
		}

		//恢复
		obj.find(".img3-mask").stop().animate({
			"top": "365px",
			"height": "30px"
		}, 200);
		obj.find(".temp4").stop().animate({
			"top": "5px"
		}, 200)
		obj.find(".temp5").stop().animate({
			"top": "5px",
			"opacity": "0"
		}, 300)
	});

	//图四
	$(".part1-back .preface-img4").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img4-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp6") || obj.hasClass("temp7")) {
			obj = obj.parent().parent();
		}
		//制作动画 鼠标滑过 蒙版向上拉开
		obj.find(".img4-mask").stop().animate({
			"top": "205px",
			"height": "190px"
		}, 300);
		//一直显示的文字垂直居中
		obj.find(".temp6").stop().animate({
			"top": "58px",
			"z-index": "100"
		}, 300);
		//另一种文字 出现并显示
		obj.find(".temp7").stop().animate({
			"top": "97px",
			"opacity": "1",
			"z-index": "101"
		}, 200);

	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("img4-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("temp6") || obj.hasClass("temp7")) {
			obj = obj.parent().parent();
		}

		//恢复
		obj.find(".img4-mask").stop().animate({
			"top": "365px",
			"height": "30px"
		}, 200);
		obj.find(".temp6").stop().animate({
			"top": "5px"
		}, 200)
		obj.find(".temp7").stop().animate({
			"top": "5px",
			"opacity": "0"
		}, 300)
	});

	//初始化状态下的攻略心得蒙版层
	$(".experience-mask .info-btns").css({
		"height": "0px",
		"margin-top": "-10px"
	});
	$(".experience-mask").css({
		"height": "117px",
		"margin-top": "-121px",
		"background-color": "black"
	});

	$("#experiences li").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("experience-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("arrow") || obj.hasClass("guide") || obj.hasClass("info-btns") || obj.hasClass("more")) {
			obj = obj.parent().parent();
		}
		obj.stop().animate({
			"top": "-50px"
		}, 200);
		//蒙版层动画
		var mask = obj.find(".experience-mask");
		mask.find(".more").html("——— CLICK FOR MORE ———");
		mask.css({
			"background-color": "#640200"
		});
		mask.stop().animate({
			"height": "196px",
			"margin-top": "-200px"
		}, 300);
		mask.find(".info-btns").stop().animate({
			"height": "80px",
			"margin-top": "10px"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG' || obj.hasClass("experience-mask")) {
			obj = obj.parent();
		} else if (obj.hasClass("arrow") || obj.hasClass("guide") || obj.hasClass("info-btns") || obj.hasClass("more")) {
			obj = obj.parent().parent();
		}

		obj.stop().animate({
			"top": "0px"
		}, 200);
		//蒙版层动画
		var mask = obj.find(".experience-mask");
		mask.find(".more").html("GETTING STAREDGUIDE");
		mask.css({
			"background-color": "black"
		});
		mask.stop().animate({
			"height": "117px",
			"margin-top": "-121px"
		}, 300);
		mask.find(".info-btns").stop().animate({
			"height": "0px",
			"margin-top": "-10px"
		}, 300);
	});

	//绑定角色信息中的鼠标移入和移入的事件
	$("#characters li").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG') {
			obj = obj.parent();
		}
		if (nodeName == 'DIV') {
			if (obj.hasClass("chaacter-tip")) {
				obj = obj.parent();
			} else if (obj.hasClass("arrow") || obj.hasClass("title-cn") || obj.hasClass("title-en")) {
				obj = obj.parent().parent();
			}
		}
		obj.children(".chaacter-tip").css({
			"color": "white"
		}).stop().animate({
			"background-color": "rgb(118,0,0)"
		}, 300);
		obj.stop().animate({
			"top": "-50px"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'IMG') {
			obj = obj.parent();
		}
		if (nodeName == 'DIV') {
			if (obj.hasClass("chaacter-tip")) {
				obj = obj.parent();
			} else if (obj.hasClass("arrow") || obj.hasClass("title-cn") || obj.hasClass("title-en")) {
				obj = obj.parent().parent();
			}
		}
		obj.children(".chaacter-tip").css({
			"color": "black"
		}).stop().animate({
			"background-color": "rgb(255, 255, 255)"
		}, 300);
		obj.stop().animate({
			"top": "0px"
		}, 300);
	});

	$(function() {
		//默认选中第九个
		var index = $(".characteristic-pic").eq(8);

		index.find(".info-p1").stop().animate({
			"opacity": "0"
		}, 300);
		index.find(".info-p2").stop().animate({
			"opacity": "0"
		}, 300);
		index.stop().animate({
			"height": "530px",
			"top": "-40px"
		}, 300);
		index.find(".mask").stop().animate({
			"opacity": "0"
		}, 300);
		index.find(".more-btn").stop().animate({
			"background-color": "#842223",
			"margin-left": "60px",
			"margin-top": "-59px"
		}, 300);

		//TODO....  拖拽

		$.fn.extend({
			SliderObject: function(objMoved) {
				var mouseDownPosiX;
				var InitPositionX;
				var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
				$(this).mousedown(function(e) {
					//当鼠标按下时捕获鼠标位置以及对象的当前位置
					mouseDownPosiX = e.pageX;

					InitPositionX = obj.css("left").replace("px", "");
					obj.mousemove(function(e) {
						var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX);
						console.log(tempX);
						obj.css("left", tempX + "px");

						//						console.log(tempX);

						//当鼠标弹起或者离开元素时，将鼠标弹起置为false，不移动对象
					}).mouseup(function() {
						obj.unbind("mousemove");
					}).mouseleave(function() {
						obj.unbind("mousemove");
					});
				})
			}
		});
		$(document).ready(function() {

			$(".characteristic-pic-order div .mask").on("mouseenter", function(e) {
				var obj = $(e.target);
				var nodeName = obj.context.nodeName;
				if (obj.hasClass("mask") || obj.parent().hasClass("info")) {
					obj = obj.parent();
				}

				//判断isOPen是否为0  如果是将obj变为指定样式 ，同时将index样式去掉            否则，无反应
				if (obj.attr("isOpen") == 0) {
					//为当前元素（obj）添加样式
					obj.find(".info-p1").stop().animate({
						"opacity": "0"
					}, 300);
					obj.find(".info-p2").stop().animate({
						"opacity": "0"
					}, 300);
					obj.stop().animate({
						"height": "530px",
						"top": "-40px"
					}, 300);
					obj.find(".mask").stop().animate({
						"opacity": "0"
					}, 300);
					obj.find(".more-btn").stop().animate({
						"background-color": "#842223",
						"margin-left": "60px",
						"margin-top": "-59px"
					}, 300);

					//移除选定样式（index）				
					index.find(".info-p1").stop().animate({
						"opacity": "1"
					}, 300);
					index.find(".info-p2").stop().animate({
						"opacity": "1"
					}, 300);
					index.stop().animate({
						"height": "450px",
						"top": "0px"
					}, 300);
					index.find(".mask").stop().animate({
						"opacity": "0.6"
					}, 300);
					index.find(".more-btn").stop().animate({
						"background-color": "black",
						"margin-left": "20px",
						"margin-top": "18px"
					}, 300);
				}

			}).on("mouseleave", function(e) {
				var obj = $(e.target);
				var nodeName = obj.context.nodeName;
				if (obj.has("mask") || obj.has("info")) {
					obj = obj.parent();
				}

				//鼠标离开时 去掉obj样式  同时恢复默认元素样式
				//去除obj样式
				obj.find(".info-p1").stop().animate({
					"opacity": "1"
				}, 300);
				obj.find(".info-p2").stop().animate({
					"opacity": "1"
				}, 300);
				obj.stop().animate({
					"height": "450px",
					"top": "0px"
				}, 300);
				obj.find(".mask").stop().animate({
					"opacity": "0.6"
				}, 300);
				obj.find(".more-btn").stop().animate({
					"background-color": "black",
					"margin-left": "20px",
					"margin-top": "18px"
				}, 300);
				//默认元素恢复样式
				index.find(".info-p1").stop().animate({
					"opacity": "0"
				}, 300);
				index.find(".info-p2").stop().animate({
					"opacity": "0"
				}, 300);
				index.stop().animate({
					"height": "530px",
					"top": "-40px"
				}, 300);
				index.find(".mask").stop().animate({
					"opacity": "0"
				}, 300);
				index.find(".more-btn").stop().animate({
					"background-color": "#842223",
					"margin-left": "60px",
					"margin-top": "-59px"
				}, 300);
			}).on("click", function(e) {
				var obj = $(e.target);
				var nodeName = obj.context.nodeName;
				if (obj.has("mask") || obj.has("info")) {
					obj = obj.parent();
				} else if (nodeName == 'P' || obj.hasClass("more-btn")) {
					obj = obj.parent().parent();
				}

				if (obj.attr("order") == 1) {
					obj.parent().parent().stop().animate({
						"left": "572px"
					}, 300);
				} else if (obj.attr("order") == 2) {
					obj.parent().parent().stop().animate({
						"left": "286px"
					}, 300);
				} else if (obj.attr("order") == 3) {
					obj.parent().parent().stop().animate({
						"left": "2281px"
					}, 300);
				} else if (obj.attr("order") == 4) {
					obj.parent().parent().stop().animate({
						"left": "1995px"
					}, 300);
				} else if (obj.attr("order") == 5) {
					obj.parent().parent().stop().animate({
						"left": "1709px"
					}, 300);
				} else if (obj.attr("order") == 6) {
					obj.parent().parent().stop().animate({
						"left": "1423px"
					}, 300);
				} else if (obj.attr("order") == 7) {
					obj.parent().parent().stop().animate({
						"left": "1144px"
					}, 300);
				} else if (obj.attr("order") == 8) {
					obj.parent().parent().stop().animate({
						"left": "858px"
					}, 300);
				} else if (obj.attr("order") == 9) {
					obj.parent().parent().stop().animate({
						"left": "572px"
					}, 300);
				} else if (obj.attr("order") == 10) {
					obj.parent().parent().stop().animate({
						"left": "286px"
					}, 300);
				} else if (obj.attr("order") == 11) {
					obj.parent().parent().stop().animate({
						"left": "0px"
					}, 300);
				} else if (obj.attr("order") == 12) {
					obj.parent().parent().stop().animate({
						"left": "-286px"
					}, 300);
				} else if (obj.attr("order") == 13) {
					obj.parent().parent().stop().animate({
						"left": "-572px"
					}, 300);
				} else if (obj.attr("order") == 14) {
					obj.parent().parent().stop().animate({
						"left": "-858px"
					}, 300);
				} else if (obj.attr("order") == 15) {
					obj.parent().parent().stop().animate({
						"left": "-1144px"
					}, 300);
				} else if (obj.attr("order") == 16) {
					obj.parent().parent().stop().animate({
						"left": "-1423px"
					}, 300);
				} else if (obj.attr("order") == 17) {
					obj.parent().parent().stop().animate({
						"left": "-1709px"
					}, 300);
				} else if (obj.attr("order") == 18) {
					obj.parent().parent().stop().animate({
						"left": "-1995px"
					}, 300);
				} else if (obj.attr("order") == 19) {
					obj.parent().parent().stop().animate({
						"left": "-2281px"
					}, 300);
				} else if (obj.attr("order") == 20) {
					obj.parent().parent().stop().animate({
						"left": "-2567px"
					}, 300);
				} else if (obj.attr("order") == 21) {
					obj.parent().parent().stop().animate({
						"left": "-2853px"
					}, 300);
				} else if (obj.attr("order") == 22) {
					obj.parent().parent().stop().animate({
						"left": "-3139px"
					}, 300);
				} else if (obj.attr("order") == 23) {
					obj.parent().parent().stop().animate({
						"left": "-3425px"
					}, 300);
				} else if (obj.attr("order") == 24) {
					obj.parent().parent().stop().animate({
						"left": "-3711px"
					}, 300);
				} else if (obj.attr("order") == 25) {
					obj.parent().parent().stop().animate({
						"left": "-3997px"
					}, 300);
				} else if (obj.attr("order") == 26) {
					obj.parent().parent().stop().animate({
						"left": "-4283px"
					}, 300);
				} else if (obj.attr("order") == 27) {
					obj.parent().parent().stop().animate({
						"left": "-4569px"
					}, 300);
				} else if (obj.attr("order") == 28) {
					obj.parent().parent().stop().animate({
						"left": "-4855px"
					}, 300);
				} else if (obj.attr("order") == 29) {
					obj.parent().parent().stop().animate({
						"left": "-5141px"
					}, 300);
				} else if (obj.attr("order") == 30) {
					obj.parent().parent().stop().animate({
						"left": "-5427px"
					}, 300);
				} else if (obj.attr("order") == 31) {
					obj.parent().parent().stop().animate({
						"left": "-5713px"
					}, 300);
				} else if (obj.attr("order") == 32) {
					obj.parent().parent().stop().animate({
						"left": "858px"
					}, 300);
				} else if (obj.attr("order") == 33) {
					obj.parent().parent().stop().animate({
						"left": "572px"
					}, 300);
				}

				//点击过之后，
				if (obj.attr("order") == 32) {
					index.attr("isOpen", "0");
					index = $(".characteristic-pic").eq(7);
					index.attr("isOpen", "1");
					index.find(".info-p1").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".info-p2").stop().animate({
						"opacity": "0"
					}, 300);
					index.stop().animate({
						"height": "530px",
						"top": "-40px"
					}, 300);
					index.find(".mask").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".more-btn").stop().animate({
						"background-color": "#842223",
						"margin-left": "60px",
						"margin-top": "-59px"
					}, 300);
				} else if (obj.attr("order") == 33 || obj.attr("order") == 1) {
					index.attr("isOpen", "0");
					index = $(".characteristic-pic").eq(8);
					index.attr("isOpen", "1");
					index.find(".info-p1").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".info-p2").stop().animate({
						"opacity": "0"
					}, 300);
					index.stop().animate({
						"height": "530px",
						"top": "-40px"
					}, 300);
					index.find(".mask").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".more-btn").stop().animate({
						"background-color": "#842223",
						"margin-left": "60px",
						"margin-top": "-59px"
					}, 300);
				} else if (obj.attr("order") == 2) {
					index.attr("isOpen", "0");
					index = $(".characteristic-pic").eq(9);
					index.attr("isOpen", "1");
					index.find(".info-p1").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".info-p2").stop().animate({
						"opacity": "0"
					}, 300);
					index.stop().animate({
						"height": "530px",
						"top": "-40px"
					}, 300);
					index.find(".mask").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".more-btn").stop().animate({
						"background-color": "#842223",
						"margin-left": "60px",
						"margin-top": "-59px"
					}, 300);
				} else {
					index.attr("isOpen", "0");
					index = obj;
					index.attr("isOpen", "1");

					index.find(".info-p1").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".info-p2").stop().animate({
						"opacity": "0"
					}, 300);
					index.stop().animate({
						"height": "530px",
						"top": "-40px"
					}, 300);
					index.find(".mask").stop().animate({
						"opacity": "0"
					}, 300);
					index.find(".more-btn").stop().animate({
						"background-color": "#842223",
						"margin-left": "60px",
						"margin-top": "-59px"
					}, 300);
				}

			}).on("mousemove", function(e) {
				var obj = $(e.target);
				var nodeName = obj.context.nodeName;
				if (obj.has("mask") || obj.has("info")) {
					obj = obj.parent();
				}

				if (obj.attr("order") == 1) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 2) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 3) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 4) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 5) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 6) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 7) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 8) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 9) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
					//					console.log(tempX);
					//					if(){
					//						
					//					}
				}
				if (obj.attr("order") == 10) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 11) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 12) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 13) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 14) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 15) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 16) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 17) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 18) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 19) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 20) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 21) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 22) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 23) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 24) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 25) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 26) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 27) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 28) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 29) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 30) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 31) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 32) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}
				if (obj.attr("order") == 33) {
					$(".characteristic-pic").eq(obj.attr("order")).SliderObject($(".characteristic-pics"));
				}

			});

			//$(".characteristic-pic").eq(8).SliderObject($(".characteristic-pics"));
		})

		//TODO..拖拽移动
		//通过绑定characteristic-pic-order该元素，对该元素"transform": "translateX()"进行控制

	});

	//系列回顾中的导航
	//默认选中第一个
	var firstNav = $("#nav li").eq(0);
	firstNav.css("background-color", "#760000");
	firstNav.children(".version-selected").css("display", "inline-block");
	firstNav.children(".version-title").css("color", "white");
	firstNav.children(".version-underline").css("display", "none");

	//鼠标放入和移除导航时的事件
	$("#nav li").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'DIV' || nodeName == 'SPAN') {
			obj = obj.parent();
		}
		obj.stop().animate({
			"background-color": "#760000"
		}, 300);
		obj.children(".version-selected").css("display", "inline-block");
		obj.children(".version-title").css("color", "white");
		obj.children(".version-underline").css("display", "none");
		obj.children(".version-selected").stop().animate({
			"width": "4px",
			"height": "13px"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'DIV' || nodeName == 'SPAN') {
			obj = obj.parent();
		}
		if (obj.attr("isNow") != "1") {
			obj.stop().animate({
				"background-color": "#efedeb"
			}, 300);
			obj.children(".version-selected").css("display", "none");
			obj.children(".version-title").css("color", "black");
			obj.children(".version-underline").css("display", "block");
		}

	});

	//点击导航时触发的事件
	$("#nav li").on("click", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'DIV' || nodeName == 'SPAN') {
			obj = obj.parent();
		}
		var order = parseInt(obj.attr("order"));
		var allNavs = $("#nav li");
		//先移除所有的选中样式
		allNavs.attr("isNow", "0");
		allNavs.css("background-color", "#efedeb");
		allNavs.children(".version-selected").css("display", "none");
		allNavs.children(".version-title").css("color", "black");
		allNavs.children(".version-underline").css("display", "block");
		allNavs.children(".version-selected").stop().animate({
			"width": "0px",
			"height": "0px"
		}, 300);

		//为当前点击的元素添加选中样式
		obj.attr("isNow", "1");
		obj.css("background-color", "#760000");
		obj.children(".version-selected").css("display", "inline-block");
		obj.children(".version-title").css("color", "white");
		obj.children(".version-underline").css("display", "none");

		$("#ff1").animate({
			"margin-top": (-450 * (order - 1)) + "px"
		}, 400);
		obj.children(".version-selected").stop().animate({
			"width": "4px",
			"height": "13px"
		}, 300);
	});

	//点击壁纸中图片触发的事件
	$("#bz-btns li").eq(0).css({
		"background-color": "#b10000",
		"width": "18px"
	});

	//版本信息中tab页的切换
	$(".version-tab li").on("mouseenter", function(e) {
		var obj = $(e.target);
		var isChose = obj.attr("isChose");
		if (isChose == "0") {
			obj.css({
				"background-color": "#FFFFFF"
			});
		}
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var isChose = obj.attr("isChose");
		if (isChose == "0") {
			obj.css({
				"background-color": "#e0e0e0"
			});
		}
	}).on("click", function(e) {
		var obj = $(e.target);
		$(".version-tab li").css({
			"background-color": "#e0e0e0"
		}).attr("isChose", "0");;
		obj.css({
			"background-color": "#FFFFFF"
		}).attr("isChose", "1");
		//移动箭头的位置
		var tabOrder = obj.attr("tabOrder");
		if (tabOrder == "1") {
			$(".version .arrow").css({
				"left": "628px"
			});
			$(".tab1").css("display", "block");
			$(".tab2").css("display", "none");
		} else if (tabOrder == "2") {
			$(".version .arrow").css({
				"left": "783px"
			});
			$(".tab1").css("display", "none");
			$(".tab2").css("display", "block");
		}
	});
	//初始化头像
	function initHeads(startIndex) {
		var heads = $(".chose-head div[class=head]");
		for (var i = 0; i < heads.length; i++) {
			heads.eq(i).css("background-image", "url(img/head" + (startIndex + i) + ".jpg)");
		}
	}

	initHeads(1);
	//鼠标放到头像上和移除时的事件
	$(".head").on("mouseenter", function(e) {
		var obj = $(e.target);
		if (obj.hasClass("change")) {
			obj.css("opacity", "0.7");
		} else {
			obj.css("opacity", "1.0");
		}
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		if (obj.hasClass("change")) {
			obj.css("opacity", "1.0");
		} else {
			obj.css("opacity", "0.7");
		}
	});
	//换一批
	$(".change").toggle(function() {
		initHeads(6);
	}, function() {
		initHeads(1);
	});

	//修正第一个赞的样式
	$(".zan-info").eq(0).css("top", "-100px");

	//分页 假设每页查5条
	var pageSize = 5;
	var pageCount;
	var pageNo = 1;
	var serverPath = "http://127.0.0.1:8020/Final Fantasy/";

	function selectPage(pageNo) {
		$(".pageNo").css({
			"background-color": "",
			"color": "#848ba7"
		}).eq(pageNo - 1).css({
			"background-color": "#a52424",
			"color": "#fff"
		});
	}

	//绑定页码
	function getPageSize() {
		$.getJSON(serverPath + "json/comment-data.json", {}, function(data) {
			//计算页数
			pageCount = (data.length % pageSize == 0) ? (data.length / pageSize) : (parseInt(data.length / pageSize) + 1);
			//绑定页数
			$(".pageNo").remove();
			for (var i = pageCount; i >= 1; i--) {
				$("#first").after("<li class='pageNo' style='margin-left:5px' pageNo=" + i + ">" + i + "</li>");
			}
			selectPage(1);
			//绑定页码的点击事件
			$(".pageNo").on("click", function(e) {
				var obj = $(e.target);
				var no = parseInt(obj.attr("pageno"));
				$(".pageNo").css({
					"background-color": "",
					"color": "#848ba7"
				});
				obj.css({
					"background-color": "#a52424",
					"color": "#fff"
				});
				pageNo = no;
				getCommentByPage(no);
			});
		});
	}

	getPageSize();

	function getCommentByPage(pageNo) {
		var beginIndex = (pageNo - 1) * pageSize;
		var endIndex = pageNo * pageSize - 1;
		$.getJSON(serverPath + "json/comment-data.json", {}, function(data) {
			//获取所有评论信息
			var comments = data.slice(beginIndex, endIndex + 1);
			//将评论信息绑定
			$(".one-comment").remove();
			for (var i = 0; i < comments.length; i++) {
				var comment = comments[i];
				var html =
					'<div class="one-comment">' +
					'<div class="head-img" style="background-image: url(img/' + comment.head + ');"></div>' +
					'<div class="user-info">' +
					'<span class="user-name">电玩巴士用户</span>' +
					'<p class="comment-content">' +
					comment.comment +
					'</p>' +
					'<span class="comment-date">' + comment.date + '</span>' +
					'</div>' +
					'<div class="zan-info">' +
					'<span class="zan-num">' + comment.zanNum + '</span>' +
					'<span class="hand-icon"></span>' +
					'</div>' +
					'<div class="split-line"></div>' +
					'</div>';
				$("#comments").append(html);
			}
		});
	}

	//页面加载时读取第一页的数据
	getCommentByPage(1);
	//绑定首页、上一页、尾页、下一页

	$("#first").on("click", function() {
		getCommentByPage(1);
		selectPage(1);
		pageNo = 1;
	});
	$("#last").on("click", function() {
		getCommentByPage(pageCount);
		selectPage(pageCount);
		pageNo = pageCount;
	});
	$("#prev").on("click", function() {
		if (pageNo - 1 == 0) {
			pageNo = 1;
		} else {
			pageNo--;
		}
		getCommentByPage(pageNo);
		selectPage(pageNo);
	});
	$("#next").on("click", function() {
		if (pageNo == pageCount) {
			pageNo = pageCount;
		} else {
			pageNo++;
		}
		getCommentByPage(pageNo);
		selectPage(pageNo);
	});

	//收起按钮
	$(".col-btn").on("mouseenter", function(e) {
		var obj = $(e.target);
		obj.animate({
			"background-color": "rgba(180,180,180, .5)"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		obj.stop().animate({
			"background-color": "rgba(98,100,110, .5)"
		}, 300);
	}).on("click", function(e) {
		var obj = $(e.target);
		var iscol = obj.attr("iscol");
		if (iscol == "0") {
			obj.attr("iscol", "1");
			$(".col-btn").css({
				"background-position": "-40px -178px"
			});
			$(".right-nav").animate({
				"left": "1303px"
			}, 300);
		} else {
			obj.attr("iscol", "0");
			$(".col-btn").css({
				"background-position": "0px -178px"
			});
			$(".right-nav").animate({
				"left": "1103px"
			}, 300);
		}
	});
	//热门评论
	$(".hot-comment").on("mouseenter", function() {
		$(".hot-back").animate({
			"color": "rgb(218,218,218)"
		}, 300);
	}).on("mouseleave", function(e) {
		$(".hot-back").animate({
			"color": "white"
		}, 300);
	});
	//特色玩法默认选中
	$(".nav:not([class*='top']):not([class*='share'])").on("mouseenter", function(e) {
		var obj = $(e.target);
		var isNow = obj.attr("isnow");
		if (isNow == "0") {
			obj.stop().animate({
				"padding-left": "40px",
				"background-position-x": "0px",
				"background-position-y": "-128px"
			}, 300);
		}
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var isNow = obj.attr("isnow");
		if (isNow == "0") {
			obj.stop().animate({
				"padding-left": "0px",
				"background-position-x": "-199px",
				"background-position-y": "-128px"
			}, 300);
		}
	}).on("click", function(e) {
		var obj = $(e.target);
		$(".nav").stop().animate({
			"padding-left": "0px",
			"background-position-x": "-199px",
			"background-position-y": "-128px"
		}, 300).attr("isnow", "0");
		obj.attr("isnow", "1").stop().animate({
			"padding-left": "40px",
			"background-position-x": "0px",
			"background-position-y": "-128px"
		}, 300);
		//定位
		var order = obj.attr("order");
		if (order == "1") {
			$("body").stop().animate({
				"scrollTop": "1320px"
			}, 300);
		} else if (order == "2") {
			$("body").stop().animate({
				"scrollTop": (1320 + 938) + "px"
			}, 300);
		} else if (order == "3") {
			$("body").stop().animate({
				"scrollTop": (1320 + 938 + 836) + "px"
			}, 300);
		} else if (order == "4") {
			$("body").stop().animate({
				"scrollTop": (1320 + 938 + 836 + 938) + "px"
			}, 300);
		} else if (order == "5") {
			$("body").stop().animate({
				"scrollTop": (1320 + 938 + 836 + 938 + 836) + "px"
			}, 300);
		} else if (order == "6") {
			$("body").stop().animate({
				"scrollTop": (1320 + 938 + 836 + 938 + 836 + 938) + "px"
			}, 300);
		}

	}).eq(2).css({
		"padding-left": "40px",
		"background-position": "0 -128px"
	});
	$(".hot-comment").on("click", function() {
		$("body").stop().animate({
			"scrollTop": (1320 + 938 + 836 + 938 + 836 + 938 + 975) + "px"
		}, 300);
	});
	$(".top").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == "P") {
			obj = obj.parent();
		}
		obj.stop().animate({
			"color": "white"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == "P") {
			obj = obj.parent();
		}
		obj.stop().animate({
			"color": "rgb(68,75,105)"
		}, 300);
	}).on("click", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == "P") {
			obj = obj.parent();
		}
		$("body").stop().animate({
			"scrollTop": "0px"
		}, 300);
	});
	//分享按钮
	$(".share-method").on("mouseenter", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'I') {
			obj = obj.parent();
		}
		obj.stop().animate({
			"background-color": "rgb(167,75,75)"
		}, 300);
	}).on("mouseleave", function(e) {
		var obj = $(e.target);
		var nodeName = obj.context.nodeName;
		if (nodeName == 'I') {
			obj = obj.parent();
		}
		obj.stop().animate({
			"background-color": "rgb(165,165,165)"
		}, 300);
	});
});